<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { useGameStore } from '@/stores/game'

const gameStore = useGameStore()

const currentHandicapCode = computed(() => gameStore.currentHandicapCode)

const sysHandicapList = computed(
  () => gameStore?.gameList.find((item) => gameStore.currentGame === item.lotteryCode)?.sysHandicapList ?? [],
)

const changeSysHandicap = (code) => {
  gameStore.setHandicapCode(code)
  emit('updateTemplate', code)
}

const emit = defineEmits(['updateTemplate'])

onMounted(async () => {
  gameStore.setHandicapCode(null)
})

</script>
<template>
  <div class="handicap-box" v-if="sysHandicapList.length">
    <ul>
      <li
        v-for="(item, index) in sysHandicapList"
        :class="currentHandicapCode === item.handicapCode && 'active'"
        @click="changeSysHandicap(item.handicapCode)"
        :key="index"
      >
        {{ item.handicapName }}
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.handicap-box {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    box-sizing: border-box;
    li {
      width: 60px;
      height: 23px;
      border-radius: 5px;
      background: linear-gradient(0deg, #2c3454, #2c3454), linear-gradient(180deg, #333950 0%, #24253d 100%);
      border: 0.5px solid #2c3454;
      font-family: PingFang SC;
      font-size: 12px;
      line-height: 17px;
      color: #8598bb;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 6px;
      box-sizing: border-box;
      &.active {
        color: #fff;
        border-color: #2f20be;
        background: radial-gradient(53.32% 27.38% at 50% 100%, #7958fd 0%, rgba(88, 154, 253, 0) 100%),
          radial-gradient(55.41% 21.83% at 50% 6.75%, rgba(188, 207, 255, 0.4) 0%, rgba(124, 137, 255, 0) 100%),
          linear-gradient(180deg, #7153ed 0%, #4c3ecf 53.93%, #7257ff 100%);
      }
    }
  }
}
</style>
